<!-- 树型组件存放处 -->
<template>
  <!-- 把这个tree当做组件，减少代码,提升复用-->
  <!-- 自定义内容  data：当前行的数据源-->
  <el-row class="myrow" style="width: 100%">
    <!-- 对半分 -->
    <el-col :span="12"><i class="el-icon-s-grid
" v-if="data.isHead"></i>{{ data.name }}</el-col>
    <el-col :span="12" style="text-align:right">
      <span class="manage">{{ data.manager }}</span>
      <el-dropdown class="mydown" @command="delDept">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <!-- if为真才会执行里面的内容 因此如果一开始为真取反为假则就不会执行 -->
          <el-dropdown-item command="check" v-if="!data.isHead">查看部门</el-dropdown-item>
          <el-dropdown-item command="del" v-if="!data.isHead">删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>

  </el-row>
</template>

<script>
//导入操作组织架构的api
import { delDetApi } from '@/api/departments'
export default {
  // 接收外界传入数据
  props: ['data'],
  methods: {
    delDept (command) {
      if (command === 'add') {
        // 新增部门
        // 打开新增部门的diog,修改用emit父组件数据
        this.$emit('addShow', this.data.id)

      } else if (command === 'check') {
        // 查看部门
        this.$emit('editShow', this.data.id)
      } else if (command === 'del') {
        // 删除部门
        // 询问用户是否删除
        this.$confirm('是否删除当前部门').then(async () => {
          // 将要删除的数据提交到服务器
          // 获取id 并删除
          await delDetApi(this.data.id)
          // 更新数据 调用父组件中的方法 必须在父组件的调用子组件处写上这个函数
          this.$emit('updateData')


        }).catch(() => { console.log('用户取消了删除') })

      }
    }
  },
  // data () {
  //   return
  //   { }
  // }

}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.myrow {
  .mytitle {
    font-weight: 700;
  }

  .manage {
    font-size: 14px;
    font-weight: 700;
  }

  .mydown {
    margin-left: 20px;

  }
}
</style>